<script lang="ts">
export default {
  name: 'Test-test1-4'
}
</script>

<template>
  <h2>
    下面是一个购物车的静态 HTML 模板和样式部分。你可以在此基础上实现购物车的功能，包括
    ref、reactive、计算属性、样式绑定等 Vue 3 知识点。
  </h2>
  <div class="note">
    <h3>任务说明：</h3>
    <p>ref - 可以用于管理输入框中的商品数量值。</p>
    <p>reactive - 可以用于管理购物车中的商品列表、商品的数量、价格等信息。</p>
    <p>计算属性 - 可以用于自动计算购物车中商品的总数量和总价格。</p>
    <p>样式绑定 - 可以动态地调整按钮或商品样式，例如根据商品库存状态或数量做出样式变化。</p>
    <p>在此基础上，你可以编写 Vue 3 代码，实现一个完整的购物车功能。</p>
  </div>

  <div class="group">
    <div class="shopping-cart">
      <h1>Shopping Cart</h1>

      <!-- 商品列表 -->
      <div class="product-list">
        <div class="product">
          <img src="https://via.placeholder.com/100" alt="Product Image" />
          <div class="product-details">
            <h2>Product 1</h2>
            <p>$100.00</p>
            <div class="quantity">
              <button :disabled="product1Num < 1" @click="numDecre1">-</button>
              <input type="text" v-model="product1Num" />
              <button @click="numIncre1">+</button>
            </div>
          </div>
        </div>

        <div class="product">
          <img src="https://via.placeholder.com/100" alt="Product Image" />
          <div class="product-details">
            <h2>Product 2</h2>
            <p>$50.00</p>
            <div class="quantity">
              <button :disabled="product2Num < 1" @click="numDecre2">-</button>
              <input type="text" v-model="product2Num" />
              <button @click="numIncre2">+</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 购物车总结 -->
      <div class="cart-summary">
        <h3>Cart Summary</h3>
        <p>
          Total Items: <span>{{ TotalItem }}</span>
        </p>
        <p>
          Total Price: <span>${{ TotalPrice }}.00</span>
        </p>
        <button class="checkout-btn">Checkout</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const product1Num = ref(1)
const product2Num = ref(1)
const TotalItem = computed(() => product1Num.value + product2Num.value)
const TotalPrice = computed(() => product1Num.value * 100 + product2Num.value * 50)

function numDecre1() {
  product1Num.value--
}
function numIncre1() {
  product1Num.value++
}

function numDecre2() {
  product2Num.value--
}
function numIncre2() {
  product2Num.value++
}
</script>

<style scoped>
/* 主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-details h2 {
  margin: 0;
}

.product-details p {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

/* 数量调节按钮 */
.quantity {
  display: flex;
  align-items: center;
}

.quantity button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.quantity button:hover {
  background-color: #45a049;
}

.quantity input {
  width: 40px;
  text-align: center;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}

body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
